<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>轮播图</title>
	<style type="text/css">
        #box{
        	margin:50px 300px;position: relative;
        }
        #box img{
        	width:1000px;height:300px;position: absolute;top:0;left:0;
        }
	</style>
</head>
<body>
   
    <div id="box">
    	<img src="../img/a.jpg" alt="" class="img" />
    	<img src="../img/b.jpg" alt="" class="img" />
    	<img src="../img/c.jpg" alt="" class="img" />
    	<img src="../img/d.jpg" alt="" class="img" />
    	<img src="../img/e.jpg" alt="" class="img" />
    </div>
	
</body>
</html>

<script type="text/javascript">
    //轮播图
	var box = document.getElementById('box');
	var img  = document.getElementsByClassName('img');

	num = 0;
	function run(){
		//循坏，把所有图片隐藏
		for(var i=0;i<img.length;i++){
			img[i].style.display = 'none';
		}
		//展示当前图片
	    img[num].style.display = 'block';

		if(num == img.length-1){
			num =  0;
		}else{
			num++;
		}
	}
	
	//定时器，1秒跑一次
	time = setInterval(run, 1000);  


	//鼠标移到box上面停止播放，移出自动播放
	box.onmouseover = function (){
		clearInterval(time); //清除定时器，停止播放
	}

	box.onmouseout = function (){
		time = setInterval(run, 1000); //开启定时器，自动播放
	}


	
</script>